<template>
	<div>
		<div id="main" style="width: 80vw;height:80vh;"></div>
		<div><span v-for="item in data">({{item[0] + ',' + item[1]}})</span></div>
	</div>
</template>

<script>
import * as echarts from 'echarts/core';
import {
    TitleComponent,
    TooltipComponent,
    GridComponent,
    DataZoomComponent,
    GraphicComponent
} from 'echarts/components';
import {
    LineChart
} from 'echarts/charts';
import {
    CanvasRenderer
} from 'echarts/renderers';

export default {
	name: 'LineDraggable',
	data() {
		return {
			data: [[40, -10], [-30, -5], [-76.5, 20], [-63.5, 40], [-22.1, 50]]
		}
	},
	methods:{
		getLine() {
			var chartDom = document.getElementById('main');
			var myChart = echarts.init(chartDom);
			var option;
			var lineDraggable = this;
			var symbolSize = 20;
			var data = this.data;
			
			option = {
			    title: {
			        text: 'Try Dragging these Points',
			        left: 'center'
			    },
			    tooltip: {
			        triggerOn: 'none',
			        formatter: function (params) {
			            return 'X: ' + params.data[0].toFixed(2) + '<br>Y: ' + params.data[1].toFixed(2);
			        }
			    },
			    grid: {
			        top: '8%',
			        bottom: '12%',
			    },
			    xAxis: {
			        min: -100,
			        max: 70,
			        type: 'value',
			        axisLine: {onZero: false}
			    },
			    yAxis: {
			        min: -30,
			        max: 60,
			        type: 'value',
			        axisLine: {onZero: false}
			    },
			    dataZoom: [
			        {
			            type: 'slider',
			            xAxisIndex: 0,
			            filterMode: 'none'
			        },
			        {
			            type: 'slider',
			            yAxisIndex: 0,
			            filterMode: 'none'
			        },
			        {
			            type: 'inside',
			            xAxisIndex: 0,
			            filterMode: 'none'
			        },
			        {
			            type: 'inside',
			            yAxisIndex: 0,
			            filterMode: 'none'
			        }
			    ],
			    series: [
			        {
			            id: 'a',
			            type: 'line',
			            smooth: true,
			            symbolSize: symbolSize,
			            data: data
			        }
			    ]
			};
			
			
			setTimeout(function () {
			    // Add shadow circles (which is not visible) to enable drag.
			    myChart.setOption({
			        graphic: data.map(function (item, dataIndex) {
			            return {
			                type: 'circle',
			                position: myChart.convertToPixel('grid', item),
			                shape: {
			                    cx: 0,
			                    cy: 0,
			                    r: symbolSize / 2
			                },
			                invisible: true,
			                draggable: true,
			                ondrag: function (dx, dy) {
			                    onPointDragging(dataIndex, [this.x, this.y]);
			                },
			                onmousemove: function () {
			                    showTooltip(dataIndex);
			                },
			                onmouseout: function () {
			                    hideTooltip(dataIndex);
			                },
			                z: 100
			            };
			        })
			    });
			}, 0);
			
			window.addEventListener('resize', updatePosition);
			
			myChart.on('dataZoom', updatePosition);
			
			function updatePosition() {
			    myChart.setOption({
			        graphic: data.map(function (item, dataIndex) {
			            return {
			                position: myChart.convertToPixel('grid', item)
			            };
			        })
			    });
			}
			
			function showTooltip(dataIndex) {
			    myChart.dispatchAction({
			        type: 'showTip',
			        seriesIndex: 0,
			        dataIndex: dataIndex
			    });
			}
			
			function hideTooltip(dataIndex) {
			    myChart.dispatchAction({
			        type: 'hideTip'
			    });
			}
			
			function onPointDragging(dataIndex, pos) {
			    //data[dataIndex] = myChart.convertFromPixel('grid', pos);
				lineDraggable.$set(lineDraggable.data, dataIndex, myChart.convertFromPixel('grid', pos));
			
			    // Update data
			    myChart.setOption({
			        series: [{
			            id: 'a',
			            data: data
			        }]
			    });
			}
			
			option && myChart.setOption(option);
		}
	},
	mounted() {
		echarts.use(
		    [TitleComponent, TooltipComponent, GridComponent, DataZoomComponent, GraphicComponent, LineChart, CanvasRenderer]
		);
		this.getLine();
	},
	watch: {
		data: {
			handler(newName, oldName) {
				
				//console.log('new value', this.data)
			},
			immediate: true,
			deep: true
		}
	}
}
</script>

<style>
</style>
